/*
 * @Description:
 * @version: 1.0
 * @Author: ziwei
 * @Date: 2021-08-29 18:31:54
 * @LastEditors: ziwei
 * @LastEditTime: 2021-09-27 12:19:27
 */
import {
  createStore
} from '@/vuex'

//可能要加个节流
function customPlugin(store) {
  let local = localStorage.getItem('VUEX:STATE');
  if(local){
    local.replaceState(JSON.stringify(local));
  }
  store.subscribe((mutation,state)=>{//每当状态发生变化 （调用了mutation的时候 会执行此回调）
    localStorage.setItem("VUEX:STATE",JSON.stringify(state));
  })
}

const store =  createStore({
  plugins:[//会按照注册的顺序一次执行，执行的时候会把store传递给你
    customPlugin
  ],
  strict:true,//开启严格模式 不允许用户非法操作状态（只能在mutation修改状态 否则会发生异常）
  state: { //组件中的data
    count: 0,
  },
  getters: { //计算属性 vue4 它并没有实现计算属性的功能
    double(state) {
      return state.count * 2
    }
  },
  mutations: { //可以更改状态 必须是同步更改的
    add(state, payload) {
      state.count += payload
    }
  },
  actions: { //可以调用其他的action 或者调用mutation
    asyncAdd({
      commit
    }, payload) {
      return new Promise((resolve,reject)=>{
        debugger
        setTimeout(() => {
          commit('add', payload)
          resolve();
        }, 1000)
      })
    }
  },
  modules: {//子模块 实现逻辑的拆分
    aCount:{
      namespaced:true,
      state:{count:0},
      mutations:{
        add(state,payload){
          state.count += payload
        }
      },
      modules:{
        cCount:{
          state:{count:0},
          mutations:{
            add(state,payload){
              state.count += payload
            }
          },
        }
      }
    },
    bCount:{
      namespaced:true,
      state:{count:0},
      mutations:{
        add(state,payload){
          state.count += payload
        }
      }
    }
  }
})

//严格模式
// dispatch(action)=>commit(mutation)=>修改状态
//有一个功能 在a页面需要调用一个接口 影响的可能是a的数据 b页面也需要调用同一个接口 改的是b数据

//合理划分懒加载 数组就是注册一个 字符串就是根模块下
store.registerModule(['aCount','cCount'],{
  namespaced:true,
  state:{
    count:0,
  },
  mutations:{
    add(state,payload){
      state.count += payload
    }
  }
})

export default store